<template>
  <div ref="moun" class="moun">
    <div class="box" :style="{left:left+'px',top:top+'px'}"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      left: 0,
      top: 0
    }
  },
  mounted () {
    this.$refs.moun.addEventListener('mousemove', (e) => {
      console.log(e.target)
      // console.log(e.offsetX, e.offsetY)
      // if (e.offsetX < 25) {
      //   this.left = 0
      // }
      // if (e.offsetX > 175) {
      //   this.left = 150
      // }
      // if (e.offsetX < 175 && e.offsetX > 25) {
      //   this.left = e.offsetX - 25
      // }
      // if (e.offsetY < 25) {
      //   this.top = 0
      // }
      // if (e.offsetY > 175) {
      //   this.top = 150
      // }
      // if (e.offsetY < 175 && e.offsetY > 25) {
      //   this.top = e.offsetY - 25
      // }
    })
  },
  methods: {
    // add (e) {
    //   console.log(e.offsetX, e.offsetY)
    // }
  }
}
</script>

<style>
.moun{
    margin: 20px auto;
    width: 200px;
    height: 200px;
    border: solid 1px red;
    position: relative;
}
.box{
    width: 50px;
    height: 50px;
    border: solid 1px blue;
    position: absolute;
    left: 0;
    top: 0;
}
</style>
